<template>
  <div class="search-container">
    <form action="/">
      <van-search
        v-model="searchText"
        show-action
        shape="round"
        background="#3296fa"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @focus="isResultShow = false"
      />
    </form>
    <!-- 搜索 结果 -->
    <searchResult v-if="isResultShow" :searchText="searchText"></searchResult>
    <!-- 搜索 建议 -->
    <searchSuggestion
      v-else-if="searchText"
      :searchText="searchText"
      @onSearchKey="onSearchKey"
    ></searchSuggestion>
    <!-- 搜索 历史 记录 -->
    <SreachHistroy
      v-else
      :searchTextList="searchTextList"
      :searchText="searchText"
    ></SreachHistroy>
  </div>
</template>

<script>
// 导入 组件
import SreachHistroy from './components/search-histroy.vue'
import searchSuggestion from './components/search-suggestion.vue'
import searchResult from './components/search-result.vue'

export default {
  name: 'search',
  props: {},
  data() {
    return {
      searchText: '',
      searchTextList: [],
      isResultShow: false
    }
  },
  created() {},
  methods: {
    onSearch() {
      //  搜索之后 将文本内容 放在 历史 记录中
      //  判断 数组 中的 数据是否 有重复 有重复就删除掉，并且 添加到主数组的最前面
      // 历史 记录 中的 数据 （去重的方法）不能够重复 并且 新的 搜索 记录在 （unshift）最前面
      const i = this.searchTextList.indexOf(this.searchText)
      console.log(i)
      if (i > -1) {
        this.searchTextList.splice(i, 1)
      }
      this.searchTextList.unshift(this.searchText)
      this.isResultShow = true
    },
    // 点击取消 搜索 返回 首页
    onCancel() {
      this.$router.back()
    },
    onSearchKey(str) {
      this.searchText = str
      this.onSearch()
    }
  },
  computed: {},
  watch: {},
  components: {
    SreachHistroy,
    searchSuggestion,
    searchResult
  }
}
</script>

<style lang="less" scoped>
</style>
